<template>
  <div>
    <el-dialog
      :visible.sync="dialogTableVisibletextarea"
      custom-class="sorting-code-number"
      maxHeight="null"
      title="选择"
      width="990px"
    >
      <div class="el-dialog__body-header">
        <span class="title"></span>
        <el-search
          :formProp="form"
          :showIndex="showIndex"
          @change="change"
          @search="search"
          placement="bottom-start"
          width="380px"
        >
          <template slot="search">
            <el-input
              clearable
              placeholder="请输入结算单编号"
              searchLabel="结算单编号"
              v-model="searchData.settlementCode"
            ></el-input>
            <el-input
              clearable
              placeholder="请输入合同编号"
              searchLabel="合同编号"
              v-model="searchData.contractCode"
            ></el-input>
            <el-input
              clearable
              placeholder="请输入填报单位"
              searchLabel="填报单位"
              v-model="searchData.reportInOrgName"
            ></el-input>
            <el-input
              clearable
              placeholder="请输入供应商"
              searchLabel="供应商"
              v-model="searchData.supplierName"
            ></el-input>
          </template>
        </el-search>
      </div>
      <div class="el-dialog__body-bodys">
        <div class="bodys-right">
          <el-table
            :data="tableData"
            :fit="true"
            :lineClamp="lineClampBody"
            maxHeight="390"
            style="width: 950px"
          >
            <el-table-column label="序号" width="50">
              <template slot-scope="scope">
                <span>{{ scope.$index + 1 }}</span>
              </template>
            </el-table-column>
            <template v-for="(table, index) in unfixedTableThead">
              <el-table-column
                :fixed="table.fixed || false"
                :key="index"
                :type="table.type"
                :label="table.label"
                :align="table.align || 'left'"
                :header-align="table.headerAlign || 'left'"
                :min-width="table.width"
                :prop="table.prop"
                :show-overflow-tooltip="true"
                border="true"
              >
              </el-table-column>
            </template>
            <el-table-column label="操作" width="70">
              <template slot-scope="scope" style="margin-top: -11px">
                <el-button
                  :class="scope.row.button === false ? '' : 'checked'"
                  @click="handleClick(scope.row)"
                  plain
                  size="mini"
                  type="single-number-filleted"
                  >{{ scope.row.button === false ? "选择" : "已选择" }}
                </el-button>
              </template>
            </el-table-column>
          </el-table>
          <div class="table-footer" style="height: 30px">
            <div class="ccui-table-footer">
              <div id="ccui-paging">
                <el-pagination
                  :current-page="pageNoCode"
                  :page-size="pageSizeCode"
                  :pager-count="5"
                  :pagesize="pagesize"
                  :total="total"
                  @addCurrentPage="internalCurrentPage"
                  @current-change="handleCurrentChange"
                  @next-click="handleNext"
                  @prev-click="handlePrev"
                  @size-change="handleSizeChange"
                  background
                  layout="total, prev, pager, next, jumper"
                  next-text="下一页 >"
                  popper-class="ccui-paging-page-size-popper"
                  prev-text="< 上一页"
                />
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- <div class="dialog-footer" slot="footer">
        <el-button
          @click="dialogTableVisibletextarea = false"
          size="mini"
          type="default-mini"
          >取 消
        </el-button>
        <el-button
          @click="inventoryConfirm"
          size="mini"
          type="primary-font-mini"
          >确 定
        </el-button>
      </div> -->
    </el-dialog>
  </div>
</template>

<script>
import { listSettlementPage } from "../../api/settlement-written-off.js";

export default {
  name: "codeNumber",
  data() {
    return {
      showIndex: 0,
      lineClampBody: true,
      tableData: [],
      searchData: {},
      // treeProps: {
      //   label: "name",
      //   children: "zones",
      //   isLeaf: "leaf"
      // },
      dialogTableVisibletextarea: false,
      // settlementCode contractCode supplierName reportInOrgName
      form: {
        name: "",
        unifiedCode: "",
        supplierName: "",
        supplierCode: "",
        workYears: "",
        userName: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: ""
      },
      textarea: "",
      formLabelWidth: "120px",
      pageSizeCode: 10,
      pageNoCode: 0,
      present: "",
      orgId: "",
      TableData: "",
      total: 0,
      lastTime: {
        button: false
      },
      pagesize: [10],
      unfixedTableThead: [
        {
          label: "结算单编号",
          prop: "settlementCode",
          width: "90"
        },
        {
          label: "结算单名称",
          prop: "settlementName",
          width: "90"
        },
        {
          label: "填报单位",
          prop: "reportInOrgName"
        },
        {
          label: "合同编号",
          prop: "contractCode"
        },
        {
          label: "合同名称",
          prop: "contractName"
        },
        {
          label: "供应商",
          prop: "supplierName"
        },
        {
          label: "结算数量",
          prop: "currSetCount"
        },
        {
          label: "结算金额",
          prop: "currSetMoney"
        }
        // {
        //   label: "合同数量",
        //   prop: "contractMoney"
        // },
        // {
        //   label: "含税金额",
        //   prop: "moneyWithTax"
        // }
      ]
    };
  },
  props: {
    reportInOrgId: {
      type: Number,
      default() {
        return null;
      }
    }
  },
  watch: {
    reportInOrgId(data) {
      this.orgId = data + "";
    }
  },
  mounted() {},
  methods: {
    selectHandle() {
      this.dialogTableVisibletextarea = true;
      this.listSettlementPage();
    },

    // inventoryConfirm() {
    //   this.dialogTableVisibletextarea = false;
    //   this.$emit("inventoryConfirm", this.TableData);
    // },
    listSettlementPage(item, pageNo) {
      let data = {
        pageNo: pageNo ? pageNo : 1,
        settlementStatus: "5",
        reportInOrgId: this.orgId,
        ...item
      };
      listSettlementPage(data).then(res => {
        this.TableData = "";
        this.tableData = res.data.data.rows;
        this.total = res.data.data.recordsTotal;
        this.tableData.map(e => {
          e.button = false;
          if (this.TableData.id === e.id) {
            e.button = true;
          }
          e.currSetCount =
            e.currSetCount !== null && e.currSetCount !== undefined
              ? (+e.currSetCount).toFixed(3)
              : "";
          e.currSetMoney =
            e.currSetMoney !== null && e.currSetMoney !== undefined
              ? (+e.currSetMoney).toFixed(2)
              : "";
        });
      });
    },
    handleClick(val) {
      this.TableData = val;
      val.button = true;
      if (val.id !== this.lastTime.id) {
        this.lastTime.button = false;
        this.lastTime = val;
      }

      this.tableData = [...this.tableData];

      this.dialogTableVisibletextarea = false;
      this.$emit("inventoryConfirm", this.TableData);
    },
    handleSizeChange(val) {},
    handleNodeClick(val) {
      this.$refs.tree.setCheckedKeys([]);
      this.$refs.tree.setCheckedKeys([val.id]);
    },
    handleCurrentChange(val) {
      this.listSettlementPage(this.searchData, val);
    },
    internalCurrentPage(val) {
      val = 10;
    },
    handlePrev() {},
    handleNext() {},
    handleGoPage() {},
    search(searchData) {
      this.searchData = searchData;
      this.listSettlementPage(searchData);
    },
    change(index, key, value) {
      this.showIndex = index;
      this.searchData = {};
    }
  }
};
</script>
<style lang="scss" scoped>
/deep/ .select-btn .spanClass {
  color: #999;
}
</style>
